import React, { useEffect, useState } from 'react'
import { Button, Form, Input, Table, Popconfirm, Modal, InputNumber, Select, DatePicker } from 'antd'
import dayjs from 'dayjs'
import { getUser, addUser, editUser, delUser } from '../../api'
import './user.css'

const User = () => {

  const [ listData, setListData ] = useState({name: ''})

  const [ tableData, setTableData ] = useState([])

  // 0：新增 1：编辑
  const [ modalType, setModalType ] = useState(0)

  const [ isModalOpen, setIsModalOpen ] = useState(false)

  // 创建form实例
  const [form] = Form.useForm()

  // 列
  const colums = [
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '年龄',
      dataIndex: 'age'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      render: (val) => {
        return val ? '女' : '男'
      }
    },
    {
      title: '出生日期',
      dataIndex: 'birth'
    },
    {
      title: '地址',
      dataIndex: 'addr'
    },
    {
      title: '操作',
      // render: () => {}: 如果给一个字段，如dataIndex，则该字段会自动渲染,若不给，则拿到整个当前行的数据
      render: (rowData) => {
        return (
          <div className="flex-box">
            <Button style={{ marginRight:'5px'}} onClick={() => handleClick('edit', rowData)}>编辑</Button>
            <Popconfirm
              title="提示"
              description="此操作会删除用户，是否继续？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => handleDelete(rowData)}
            >
              <Button type="primary" danger>删除</Button>
            </Popconfirm>
          </div>
        )
      }
    }
  ]

  useEffect(() => {
    // 调用后端接口获取用户列表接口数据
    getTableData()
  }, [listData])

  // 获取数据
  const getTableData = () => {
    getUser(listData).then(({ data }) => {
      // console.log(data.list)
      setTableData(data.list)
    })
  }

  // 新增/编辑按钮
  const handleClick = (type, rowData) => {
    setIsModalOpen(true)
    if(type === 'add') {
      setModalType(0)
    } else {
      setModalType(1)
      const cloneData = JSON.parse(JSON.stringify(rowData))
      // console.log('JSON版本rowData',rowData)
      cloneData.birth = dayjs(cloneData.birth, 'YYYY-MM-DD')
      // 表单数据的回填
      form.setFieldsValue(cloneData)
    }
  }

  // 删除
  const handleDelete = ({ id }) => {
    delUser({ id }).then(() => {
      getTableData()
    })
  }
  // 提交
  const handleFinish = (e) => {
    console.log(e)
    setListData({
      name: e.keyword
    })
  }

  // 弹窗确定与取消
  const handleOk = () => {
    // 表单校验
    form.validateFields().then((val) => {
      // 日期参数
      val.birth = dayjs(val.birth).format('YYYY-MM-DD')
      // console.log('new',val)
      // 调接口
      if(modalType) {   //编辑
        editUser(val).then(() => {
          handleCancel()
          getTableData()
        })
      } else {    //新增
        addUser(val).then(() => {
          handleCancel()
          getTableData()
        })
      }
    }).catch((err) => {
      console.log(err)
    })
  }
  const handleCancel = () => {
    setIsModalOpen(false)
    form.resetFields()  //清空表单
  }

  return (
    <div className="user">
      <div className="flex-box">
        <Button type="primary" onClick={() => handleClick('add')}>+新增</Button>
        <Form
          layout='inline'
          onFinish={handleFinish}
        >
          <Form.Item name="keyword">
            <Input placeholder='请输入用户名'/>
          </Form.Item>
          <Form.Item>
            <Button htmlType='submit' type='primary'>搜索</Button>
          </Form.Item>
        </Form>
      </div>
      <Table style={{marginTop: '10px'}} columns={colums} dataSource={tableData} rowKey={'id'}/>
      <Modal
        title={modalType ? '编辑用户' : '新增用户'}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText='确定'
        cancelText='取消'
      >
        <Form
          form={form}
          labelCol={{span: 6}}
          wrapperCol={{span: 18}}
          labelAlign='left'
        >
          { modalType === 1 && 
            <Form.Item
              name='id'
              hidden
            >
              <Input/>
            </Form.Item>
          }
          <Form.Item
            label='姓名'
            name='name'
            rules={[
              {
                required: true,   //必填
                message: '请输入姓名'
              }
            ]}
          >
            <Input placeholder='请输入姓名'/>
          </Form.Item>
          <Form.Item
            label='年龄'
            name='age'
            rules={[
              {
                required: true,
                message: '请输入年龄'
              },
              {
                type: 'number',
                message: '年龄必须为数字'
              }
            ]}
          >
            <InputNumber placeholder='请输入年龄'/>
          </Form.Item>
          <Form.Item
            label='性别'
            name='sex'
            rules={[
              {
                required: true,
                message: '性别不能为空'
              }
            ]}
          >
            <Select
              placeholder='请选择性别'
              options={[
                {value: 0, label: '男'},
                {value: 1, label: '女'}
              ]}
            />
          </Form.Item>
          <Form.Item
            label='出生日期'
            name='birth'
            rules={[
              {
                required: true,
                message: '出生日期不能为空'
              }
            ]}
          >
            <DatePicker placeholder='请选择' format='YYYY/MM/DD'/>
          </Form.Item>
          <Form.Item
            label='地址'
            name='addr'
            rules={[
              {
                required: true,
                message: '地址不能为空 '
              }
            ]}
          >
            <Input placeholder='请填写地址'/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default User;